<!DOCTYPE html>
<html>
<head>
<title>Coaxial Cylinders Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // Center and radii for the top ellipses
    const centerX = 200;
    const centerY = 120;
    const outerRx = 120;
    const outerRy = 45;
    const innerRx = 60;
    const innerRy = 22.5;

    // --- Draw Hatching (so other lines draw over it) ---
    ctx.save();
    // Create the clipping path for the annulus (the area between the two ellipses)
    ctx.beginPath();
    ctx.ellipse(centerX, centerY, outerRx, outerRy, 0, 0, 2 * Math.PI);
    // Create the inner ellipse hole by drawing its path in the opposite direction
    ctx.ellipse(centerX, centerY, innerRx, innerRy, 0, 0, 2 * Math.PI, true);
    ctx.clip();

    // Draw diagonal hatching lines (from top-right to bottom-left)
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    const hatchStep = 12;
    const topY = centerY - outerRy;
    const height = 2 * outerRy;
    // Iterate to create parallel lines that cover the entire clipped area
    for (let x = centerX - outerRx; x < centerX + outerRx + height; x += hatchStep) {
        ctx.moveTo(x, topY - 5);
        ctx.lineTo(x - height, topY + height + 5);
    }
    ctx.stroke();
    ctx.restore(); // Restore context to remove the clipping path


    // --- Draw the main outlines ---
    ctx.lineWidth = 2.5;

    // Outer ellipse (top rim of the outer cylinder)
    ctx.beginPath();
    ctx.ellipse(centerX, centerY, outerRx, outerRy, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // Inner ellipse (top rim of the inner cylinder)
    ctx.beginPath();
    ctx.ellipse(centerX, centerY, innerRx, innerRy, 0, 0, 2 * Math.PI);
    ctx.stroke();

    // Vertical side lines of the cylinder
    const bottomY = 380;
    ctx.beginPath();
    ctx.moveTo(centerX - outerRx, centerY);
    ctx.lineTo(centerX - outerRx, bottomY);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(centerX + outerRx, centerY);
    ctx.lineTo(centerX + outerRx, bottomY);
    ctx.stroke();

    // Jagged bottom line to indicate the cylinder is long and broken off
    ctx.beginPath();
    ctx.moveTo(centerX - outerRx, bottomY);
    ctx.quadraticCurveTo(centerX - 90, bottomY + 10, centerX - 60, bottomY - 5);
    ctx.quadraticCurveTo(centerX - 30, bottomY + 15, centerX, bottomY);
    ctx.quadraticCurveTo(centerX + 30, bottomY - 10, centerX + 60, bottomY + 5);
    ctx.quadraticCurveTo(centerX + 90, bottomY - 5, centerX + outerRx, bottomY);
    ctx.stroke();

    // --- Draw Labels ---
    ctx.font = 'italic 22px serif';

    // Radius 'a'
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(centerX + outerRx, centerY);
    ctx.stroke();
    ctx.fillText('a', centerX + outerRx / 2 + 15, centerY - 10);

    // Radius 'b'
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    // Angled line for radius b
    const angle_b = -Math.PI / 3.5; // Angle for the label line
    const endX_b = centerX + innerRx * Math.cos(angle_b);
    const endY_b = centerY + innerRy * Math.sin(angle_b);
    ctx.lineTo(endX_b, endY_b);
    ctx.stroke();
    ctx.fillText('b', centerX + 20, centerY - 15);

    // Epsilon 'ε' for dielectric material
    ctx.fillText('ε', centerX - outerRx * 0.75, centerY + 10);

    // Figure caption
    ctx.font = 'bold 20px serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 1.19', centerX, 450);

</script>
</body>
</html>